<style>
    #preview-charts { padding: 0 20px; }
    #preview-charts .row{ border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; }
    #preview-charts .row:first-child { border-top: 1px solid #ccc; }
    .preview-chart { height: 280px; background: #fff; border-right: 1px solid #ccc; position: relative; }

    .chart-mask{
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
    }
    .chart-mask .value{
        position: absolute;
        width: 200px;
        height: 20px;
        top : 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -100px;
        text-align: center;
        font-size: 14px;
        color: #aaa;
    }
</style>

<script src="/public/static/plugin/echarts/echarts-plain-map.js"></script>
<script src="/public/static/plugin/echarts/echarts.config.js"></script>
<script>

    var onceChart = {
        init: function (id, options) {
            // 主题
            var theme = chartConfig.theme;

            var chart = echarts.init(document.getElementById(id), theme);
            $("#"+id).data('eCharts', chart);
            chart.setOption(options);
        }
    };

    $(function(){
        $(".preview-chart[chart]").each(function(){
            $(this).attr('id', $(this).attr('chart')+'-chart');
        });

        // 缺省配置
        var defaultOptions = chartConfig.defaultOptions;

        // 图表数据
        <{foreach from=$chart.main item=item key=key name=foo}>
        var settingOptions = defaultOptions['<{$item.base}>'] || defaultOptions['base'];
        var dataOptions = $.parseJSON('<{$item.data nofilter}>');
        var newOptions = $.extend(true, { } , settingOptions, dataOptions);
        onceChart.init('<{$key}>-chart', newOptions);

        if(dataOptions.series.length == 0){
            $('#<{$key}>-chart div:first').append('<div class="chart-mask"><div class="value"><i class="fa fa-inbox"></i>&nbsp;&nbsp;<{$item.name}> - 暂无图表数据</div></div>')
        }else{
            $('#<{$key}>-chart div.chart-mask').remove()
        }
        <{/foreach}>
    });
</script>